<div style="height: 100%;" class="d-flex flex-column ide-tree">
    <div class="toolbar-panel" [hidden]="!enableToolbar">
        <tree-toolbar #toolbar [enableRefresh]="enableRefresh" (menuClick)="onMenuItemClick($event)"
            (refresh)="onRefresh($event)"></tree-toolbar>
    </div>

    <div class="f-utils-fill ide-tree-container" [class.ide-tree-editing]="isEditing" style="overflow: auto;"
        (keydown)="onKeyDown($event)" tabindex="-1">
        <farris-treetable #tt [columns]="cols"  [showBorder]="false" [showHeader]="false" [fixedHeader]="false"
            [autoWidth]="true" [fit]="false" [virtualized]="virtualized" [data]="data" [idField]="idField"
            [singleSelect]="true" [showCheckbox]="showCheckbox" [disabled]="false" [showLines]="showLines"
            [showLinesOnHover]="!showLines" [useIconFromData]="useIconFromData" [showIcon]="true"
            [whenDataIconEmptyUseDefault]="whenDataIconEmptyUseDefault" [leafIcon]="leafIcon" [expandIcon]="expandIcon"
            [collapseIcon]="collapseIcon" [iconField]="iconField" [iconCls]="iconCls" [checkOnSelect]="true"
            [foldIcon]="'treetable-toggler mr-1'" [unfoldIcon]="'extanded treetable-toggler mr-1'"
            [indentSpacing]="indentSpacing" [enableContextMenu]="enableContextMenu" [contextMenuItems]="contextMenus"
            [beforeShowContextMenu]="beforeShowContextMenu" (nodeSelected)="onSelectNodeChange($event)"
            (cellClick)="onNodeClick($event)" (expand)="onNodeExpaned($event)"></farris-treetable>
    </div>
</div>



<ng-template #nodeText let-ctx>
    <span class="d-flex w-100" ide-treename [data]="ctx" (singleClick)="onNodeTextClick($event)">
        <!-- 为了性能，先去掉这段 -->
        <!-- <ng-container
            *ngIf="!activeEditInfo.id || activeEditInfo.id !== ctx.rowData[idField] || !activeEditInfo.editing">
            <span
                [attr.title]="textWithId? ctx.rowData[textField] + '['+ ctx.rowData[labelField] + ']': ctx.rowData[textField]">
                {{ ctx.rowData[textField] }} <span *ngIf="textWithId && ctx.rowData[labelField]"
                    class="treenode-label text-black-50">[{{ ctx.rowData[labelField] }}]</span>
            </span>
        </ng-container>
        <ng-container *ngIf="activeEditInfo.id === ctx.rowData[idField] && activeEditInfo.editing">
            <input type="text" [ngModel]="ctx.rowData[textField]" (ngModelChange)="onNameModelChange($event)"
                class="form-control tree-node-text" (click)="$event.stopPropagation()"
                (keydown)="onNodeNameKeydown($event, ctx.rowData[textField])">
        </ng-container> -->
        <span>
            {{ ctx.rowData[textField] }}
            <span *ngIf="textWithId && ctx.rowData[labelField]" class="treenode-label text-black-50">
                [{{ ctx.rowData[labelField] }}]
            </span>

            <!-- <span class="ml-3 btn-icontext" *ngIf="enableContextMenu && !ctx.node.hideContextMenuIcon">
                <span class="f-icon f-icon-more" (click)="beforeShowContextMenu({data:ctx.rowNode})">
                </span>
            </span> -->
        </span>
    </span>
</ng-template>

<!-- <input type="text" #hiddenInput style="position: absolute;
left: -3000px;
top: -1000px; "> -->